<template lang="">
    <div class="list">
        <Breadcrumb/>
        <!-- 2. 列表展示 -->
        <div class='header'>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
              <el-form-item label="订单编号" label-width="100px">
                <el-input v-model="formInline.user" placeholder="输入品牌名称"></el-input>
              </el-form-item>
              <el-form-item label="预定时间" label-width="100px">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1"
                    style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">至</el-col>
                <el-col :span="11">
                  <el-time-picker placeholder="选择时间" v-model="formInline.date2" style="width: 100%;"></el-time-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="下单人" label-width="100px">
                <el-input v-model="formInline.user" placeholder="输入"></el-input>
              </el-form-item>
              <el-form-item label="所属单位" label-width="100px">
                <el-input v-model="formInline.user" placeholder="输入"></el-input>
              </el-form-item>
              <el-form-item label="汇总状态" label-width="100px">
                <el-select v-model="formInline.region" placeholder="全部">
                  <el-option label="全部" value="shanghai"></el-option>
                  <el-option label="未汇总" value="shanghai"></el-option>
                  <el-option label="已汇总" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-row>
      </div>
        <!-- 3.订单列表按钮 -->
        <div class="header-btn">
            <el-button type="warning" size="mini" >导出</el-button>
        </div>
        <!-- 4.表格展示数据 -->
        <div class="list-content">
             <el-table :data="tableData" border style="width: 100%" :header-row-style="{color: '#333', textAlign: 'center'}" @selection-change="selectChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="orderNum" label="汇总单编号" width="180">
                    <template slot-scope="scope">
                        <span @click="OrderDesc(scope.row)" style="color: blue; cursor: pointer">{{scope.row.orderNum}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="operator" label="汇总人" width="180"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>
                <el-table-column prop="time" label="汇总时间">
                    <template slot-scope="scope">
                        <span>{{dayjs(scope.row.time).format('YYYY-MM-DD')}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="totalPrice" label="汇总单总价格"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" size="small" @click="closeCollect(scope.row)">撤销汇总</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 5.分页 -->
        <Pagination :total="total" :pageSize="pageSize" :current-page="currentPage" @getPagination="getPagination"/>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination';
import { getCollect, getCancel } from '@/api/order';
import dayjs from 'dayjs';

export default {
    components: {
        Pagination,
    },
    data() {
        return {
            selectIds: [], // 选择的ids
            tableData: [],
            total: 1,
            currentPage: 1,
            pageSize: 1,
            formInline: {
                user: '',
                region: ''
            }
        }
    },
    created() {
        this.getCollectList();
    },
    methods: {
        dayjs,
        // 撤销汇总
        closeCollect(row) {
            this.$confirm('是否撤销该汇总订单?', '撤销汇总提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getCancel({
                    id: row.id
                }).then(res => {
                    console.log(res.data);
                    if (res.data.status === 200) {
                        // 更新视图
                        this.getCollectList();
                        this.$message({
                            type: 'success',
                            message: '撤销汇总成功!'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            
        },
        // 点击进入订单详情
        OrderDesc(row) {
            console.log('点击进入订单详情', row);
        },
        // 选择了table------
        selectChange(selection) {
            // console.log('selection--', selection);
            let arr = [];
            selection.forEach(item => {
                arr.push(item.id);
            });
            this.selectIds = arr;
            // console.log(this.selectIds);
        },
        // 点击分页-------------------
        getPagination(page) {
            // console.log(page);
            this.getCollectList(page);
        },
        // 获取汇总清单数据接口----------
        async getCollectList(page) {
            let res = await getCollect({ page });
            console.log('汇总清单数据', res.data);
            if (res.data.status === 200) {
                this.tableData = res.data.data;
                this.pageSize = res.data.pageSize;
                this.total = res.data.total;
            } else {
                console.log('请求失败');
                this.pageSize = 0;
                this.tableData = [];
                this.total = 0;
            }
        },
    }
}
</script>
<style lang="less" scoped>
.order {
    margin: 10px;
}

.list {
    background: #fff;
    padding: 20px;
    margin-top: 10px;
}

.header {
    margin-top: 20px;

    .el-form--inline .el-form-item {
        margin-right: 20px;
    }
}

.header-btn {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 10px;

    .el-button {
        background: orange;
        border: none;
        width: 100px;
        font-weight: bold;
    }
}

.list-content {
    margin-top: 30px;
}
</style>